|
1
|
|
|
import { NodeSelection } from '../components/types'; |
|
2
|
|
|
import { ElementIds, Colors } from '../utils/AppConsts'; |
|
3
|
|
|
import { createNodeLabelPath, getTextDimensions } from '../overview/graph-nodes'; |
|
4
|
|
|
|
|
5
|
|
|
// these magic numbers(-30, -36.5) are dependant of how node labels are painted relative to label text |
|
6
|
|
|
const labelPathWidthOffset = -30; |
|
7
|
|
|
const labelPathHeightOffset = -36.5; |
|
8
|
|
|
|
|
9
|
|
|
export async function createRootNode( |
|
10
|
|
|
container: NodeSelection<any>, |
|
11
|
|
|
viewboxWidth: number, |
|
12
|
|
|
viexboxHeight: number, |
|
13
|
|
|
rootNodeName: string, |
|
14
|
|
|
isConsumer: boolean, |
|
15
|
|
|
isProvider: boolean |
|
16
|
|
|
) { |
|
17
|
|
|
const nodeContainer = container |
|
18
|
|
|
.append('svg') |
|
19
|
|
|
.attr('id', ElementIds.DETAILS_ROOT_NODE_CONTAINER) |
|
20
|
|
|
.attr('font-size', 15) |
|
21
|
|
|
// hard-coded magic numbers that translates root node to position of root of the tree graphs |
|
22
|
|
|
.attr('viewBox', `-${viewboxWidth / 3.2} -${viexboxHeight / 2} ${viewboxWidth} ${viexboxHeight}`) |
|
23
|
|
|
.attr('preserveAspectRatio', 'xMidYMid meet'); |
|
24
|
|
|
const label = nodeContainer.append('path').attr('fill', Colors.CLIFTON_NAVY); |
|
25
|
|
|
const text = nodeContainer |
|
26
|
|
|
.append('text') |
|
27
|
|
|
.attr('text-anchor', 'middle') |
|
28
|
|
|
.attr('fill', Colors.WHITE) |
|
29
|
|
|
.text(rootNodeName); |
|
30
|
|
|
await delayPromise(); |
|
31
|
|
|
const { height, y } = getTextDimensions(text.node()) || { height: 0, y: 0 }; |
|
32
|
|
|
const labelPath = createNodeLabelPath(label.node(), isConsumer, isProvider); |
|
33
|
|
|
label.attr('d', labelPath).attr('transform', `translate(${labelPathWidthOffset}, ${y + labelPathHeightOffset})`); |
|
34
|
|
|
// center text vertically on label |
|
35
|
|
|
text.attr('y', y + height + 1); |
|
36
|
|
|
} |
|
37
|
|
|
|
|
38
|
|
|
function delayPromise(delay: number = 0) { |
|
39
|
|
|
return new Promise(resolve => setTimeout(resolve, delay)); |
|
40
|
|
|
} |
|
41
|
|
|
|
HLTech /
judge-d-ui
